// components/tabs/index.js
import scrollCenter from "../behaviors/scrollCenter";

Component({
  behaviors: [scrollCenter],
  externalClasses: ["extra-tabs","extra-line"],
  options: {
    multipleSlots: !0
  },
  properties: {
    tabs: {
      type: Array,
      value: []
    },
    activeKey: {
      type: String,
      value: ""
    },
    placement: {
      type: String,
      value: "top"
    },
    animated: Boolean,
    swipeable: Boolean,
    scrollable: Boolean,
    hasLine: {
      type: Boolean,
      value: !0
    },
    animatedForLine: Boolean,
    activeColor: {
      type: String,
      value: "#333333"
    },
    inactiveColor: {
      type: String,
      value: "#bbbbbb"
    },
    equalWidth: {
      type: Boolean,
      value: !0
    },
    contentHeight: Number,
    navHeight: {
      type: Number,
      value: 80
    }
  },
  data: {
    currentIndex: 0,
    transformX: 0,
    transformY: 0
  },
  observers: {
    activeKey: function (e) {
      if (!e) return;
      const t = this.properties.tabs.findIndex(t => t.key === e);
      this.setData({
        currentIndex: t
      }, () => {
        this.data.scrollable && this.queryMultipleNodes()
      })
    }
  },
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      // console.log(this.properties.tabs);
    },
  },
  ready() {
    this.initTabs()
  },
  methods: {
    initTabs() {
      // 没有key的话默认第一个元素
      if (!this.properties.activeKey) {

        this.setData({
          activeKey: this.properties.tabs[0].key,
        });

      }
    },
    handleChange(e) {
      const t = e.currentTarget.dataset.key,
        a = e.currentTarget.dataset.index;
      this._setChangeData({
        activeKey: t,
        currentIndex: a
      })
    },
    _setChangeData({
      activeKey: e,
      currentIndex: t
    }) {
      this.setData({
        activeKey: e,
        currentIndex: t
      }, () => {
        this.data.scrollable
      }), this.triggerEvent("tabChange", {
        activeKey: e,
        currentIndex: t
      })
    }
  }
});